<template>
  <div class="dynamic-wrap">

    <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
    >
      <li v-for="item in dynamicList" :key="item.id" class="list-item">
        <el-row>
          <el-avatar :src="item.avatar"></el-avatar>
          <span class="name-wrap">{{ item.nickname }}</span>
          <div class="msg-wrap" v-if="item.delFlag===0" @click="enterPreview(item.documentId,item.directoryType)">
            <div class="msg-wrap" v-if="item.recordType===1">
              上传了 &nbsp;
              <component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;
              <div class="click-font-color">{{ item.documentName }}</div>
            </div>
            <div class="msg-wrap" v-if="item.recordType===2">
              下载了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;<div class="click-font-color">{{ item.documentName }}</div>
            </div>
            <div class="msg-wrap" v-if="item.recordType===3">
              查看了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;<div class="click-font-color">{{ item.documentName }}</div>
            </div>
            <div class="msg-wrap" v-if="item.recordType===5">
              收藏了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;<div class="click-font-color">{{ item.documentName }}</div>
            </div>
            <div class="msg-wrap" v-if="item.recordType===6">
              重命名了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;<div class="click-font-color">{{ item.documentName }}</div>
            </div>
          </div>

          <div class="msg-wrap" v-if="item.delFlag===1" @click="warnDeleted()">
            <div class="msg-wrap" v-if="item.recordType===1">
              上传了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;{{ item.documentName }}
            </div>
            <div class="msg-wrap" v-if="item.recordType===2">
              下载了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;{{ item.documentName }}
            </div>
            <div class="msg-wrap" v-if="item.recordType===3">
              查看了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;{{ item.documentName }}
            </div>
            <div class="msg-wrap" v-if="item.recordType===5">
              收藏了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;{{ item.documentName }}
            </div>
            <div class="msg-wrap" v-if="item.recordType===6">
              重命名了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;{{ item.documentName }}
            </div>
            <div class="msg-wrap" v-if="item.recordType===4">
              删除了 &nbsp;<component style="vertical-align: middle" :is="fileType(item.suffix)"></component>
              &nbsp;{{ item.documentName }}
            </div>
          </div>

          <div class="msg-wrap">
            <div class="msg-wrap" v-if="item.recordType===7">
              把 &nbsp;<component style="vertical-align: middle"
                                  :is="item.directoryName ? fileType('folder') : fileType(item.suffix)"></component>
              &nbsp;
              <div v-if="item.documentId && item.delFlag===0" @click="enterPreview(item.documentId,item.directoryType)"
                   class="click-font-color">{{ item.directoryName }}{{ item.documentName }}&nbsp;
              </div>
              <div v-if="item.documentId && item.delFlag===1" @click="warnDeleted()">{{
                  item.directoryName
                }}{{ item.documentName }}&nbsp;
              </div>
              <div :class="item.directoryIsDel ? 'click-font-color':''" v-if="item.directoryName" @click="checkFolderExist(item.directoryName,item.directoryId)">{{
                  item.directoryName
                }}{{ item.documentName }}&nbsp;
              </div>

              移动到了&nbsp;<component style="vertical-align: middle" :is="fileType('folder')"></component>
              &nbsp;
              <div :class="item.destinationIsDel ? 'click-font-color':''" v-if="!item.destinationFolderName.startsWith('catalogueType_')  "
                   @click="checkFolderExist(item.destinationFolderName,item.destinationFolderId)">{{ item.destinationFolderName }}
              </div>

              <div v-if="item.destinationFolderName.startsWith('catalogueType_')"
                   @click="jumpToCatalogue(item.destinationFolderName.split('_')[1])"
                   v-text="catalogueType(item.destinationFolderName.split('_')[1])"></div>
            </div>
          </div>

          <div style="flex: 1"></div>
          <span class="date-wrap">{{ item.operateTime }}</span>
        </el-row>
      </li>
    </ul>

    <el-row>
      <el-col :span="12" :offset="12">
        <el-link type="info" :underline="false" v-if="noMore">已到最底部...</el-link>
        <el-icon class="is-loading" size="20" v-if="loading">
          <Loading/>
        </el-icon>
      </el-col>

    </el-row>

  </div>
</template>
<script>
import {computed, onMounted, reactive, ref, toRefs} from 'vue'
import FrontApi from '@/api/front'
import router from "@/router";
import WordIcon from "@/components/document/WordIcon";
import PptIcon from "@/components/document/PptIcon";
import PdfIcon from "@/components/document/PdfIcon";
import ExcelIcon from "@/components/document/ExcelIcon";
import JpgIcon from "@/components/document/JpgIcon";
import UnknownIcon from "@/components/document/UnknownIcon";
import TxtIcon from "@/components/document/TxtIcon";
import XmindIcon from "@/components/document/XmindIcon"
import MdIcon from "@/components/document/MdIcon"
import HexIcon from "@/components/document/HexIcon"
import Mp4Icon from "@/components/document/Mp4Icon"
import FolderIcon from "@/components/document/Folder"
import DictTag from "../common/DictTag";
import {ElMessage} from "element-plus";


export default {
  components: {
    DictTag,
    ExcelIcon,
    WordIcon,
    PptIcon,
    UnknownIcon,
    PdfIcon,
    JpgIcon,
    TxtIcon,
    XmindIcon,
    MdIcon,
    HexIcon,
    FolderIcon,
    Mp4Icon
  },

  setup(props, ctx) {
    var data = reactive({
      dynamicList: []
    });

    var total = ref();
    const count = ref(10)
    const loading = ref(false)
    const noMore = computed(() => count.value >= total.value)
    const disabled = computed(() => loading.value || noMore.value)
    const isDirectoryRemoved= ref(false);
    const fileType = computed(() => {
      return (type) => {
        const typeMap = {
          'doc': 'WordIcon',
          'docx': 'WordIcon',
          'ppt': 'PptIcon',
          'pptx': 'PptIcon',
          'pdf': 'PdfIcon',
          'xls': 'ExcelIcon',
          'xlsx': 'ExcelIcon',
          'jpg': 'JpgIcon',
          'png': 'JpgIcon',
          'jpeg': 'JpgIcon',
          'xmind': 'XmindIcon',
          'md': 'MdIcon',
          'txt': 'TxtIcon',
          'hex': 'HexIcon',
          'mp4': 'Mp4Icon',
          'folder': 'FolderIcon'
        }
        return typeMap[type.toLowerCase()] || 'UnknownIcon'
      }
    })

    const catalogueType = computed(() => {
      return (type) => {
        const catalogueMap = {
          '1': '专业知识',
          '2': '问题案例',
          '3': '其他'
        }
        return catalogueMap[type]
      }
    })

    const warnDeleted = () => {
      ElMessage({
        message: '该文件已被删除！',
        type: 'error',
      })
    }
    const getDynamicRecord = () => {
      FrontApi.getDynamicRecord(count.value).then(res => {
        data.dynamicList = res.data.list;
        total.value = res.data.total
      });
    }
    const load = () => {
      if (count.value < total.value) {
        loading.value = true
        setTimeout(() => {
          count.value += 10
          getDynamicRecord();
          loading.value = false
        }, 1000)
      }
    }

    const jumpToCatalogue = (type) =>{
      ctx.emit('onJumpToCatalogue',type)
    }

    const enterPreview = (documentId, type) => {
      const to = router.resolve({name: 'DetailPreview', params: {docId: documentId, type: type}})
      window.open(to.href, "_blank")
    }


    const selectMore = () => {
      if (page.value < total.value) {
        loadingDisable.value = true;
        page.value += 6;
        getDynamicRecord()
        loadingDisable.value = false;
      }
    }
    const checkFolderExist = (FolderName,id) => {
      FrontApi.checkFolderExist(FolderName,id).then(res => {
        if (res.data) {
          ctx.emit('on-change', res.data);
        } else {
          ElMessage({
            message: '该文件已被删除！',
            type: 'error',
          })
        }

      });
    }
    onMounted(() => {
      getDynamicRecord()
    });
    return {
      ...toRefs(data),
      selectMore,
      disabled,
      enterPreview,
      load,
      noMore,
      loading,
      catalogueType,
      fileType,
      warnDeleted,
      jumpToCatalogue,
      checkFolderExist,
      isDirectoryRemoved
    }
  }
}
</script>
<style scoped>

.el-row {
  margin: 3rem 0;
  align-items: center;
}

.el-avatar {
  width: 4.8rem;
  height: 4.8rem;
}

.name-wrap {
  margin: auto 2.9rem;
  font-weight: 500;
  color: var(--el-text-color-primary);
  font-size: 1.6rem;
  min-width: 6rem;
}

.msg-wrap {
  font-weight: 500;
  color: #909399;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.msg-wrap svg{
  width: 2.5rem;
  height: 2.5rem;
}

.date-wrap {
  font-weight: 400;
  color: var(--el-text-color-regular);
  font-size: 1.6rem;
}

.select-more {
  font-weight: 300;
  color: #909399;
  font-size: 1.6rem;
}

.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dynamic-wrap {
  height: calc(100% - 1.6rem);
  padding-left: 20px;
  padding-right: 20px;
}

.click-font-color {
  color: rgba(142, 197, 255, 0.99);
}
</style>
